<template>
  <div class="demo">
    <h4>画板</h4>
    <DrawingPanel
      :width="lineWidth"
      :type="drawType"
      color="yellow"
      ref="drawingPanel"
      style="width: 900px"
      @update="onDrawingPanelUpdate"
    ></DrawingPanel>
    <div style="display: flex; align-items: center">
      <a>画笔大小：</a>
      <TextInput
        style="border: 1px solid #ededed; width: 100px"
        type="number"
        v-model="lineWidth"
      ></TextInput>
      <AfastButton
        @click="changeDrawType()"
        :icon="drawType === 'pen' ? 'default-pen' : 'tm-increase'"
        :text="drawType === 'pen' ? '画笔' : '矩形'"
      ></AfastButton>
      <AfastButton
        icon="cancel"
        type="fail"
        @click="drawingPanel.clear()"
        text="清空"
      ></AfastButton>
      <AfastButton
        type="primary"
        icon="restore"
        @click="drawingPanel.setData(a)"
        text="还原"
      ></AfastButton>
    </div>
  </div>
</template>
<script setup lang="ts">
import TextInput from "@/components/a/TextInput.vue";
import AfastButton from "@/components/a/AfastButton.vue";
import DrawingPanel from "@/components/a/DrawingPanel.vue";
import useThrottle from "@/hooks/useDebounce";
import { ref } from "vue";
const throttle = useThrottle();
const lineWidth = ref(10);
const changeDrawType = () => {
  if (drawType.value === "pen") {
    drawType.value = "rect";
  } else {
    drawType.value = "pen";
  }
};
const drawingPanel = ref();
const drawType = ref("pen");
const a = ref(null);
const onDrawingPanelUpdate = (v: any) => {
  if (v.length > 0) {
    a.value = JSON.parse(JSON.stringify(v));
    throttle(() => {
      // console.log(v.length, JSON.stringify(v))
    }, 100);
  }
};
</script>
